{% extends 'layout.html' %}
{% load static %}
{% load permission %}
{% block content %}
    <div class="container-fluid" style="margin-top: 10px">
        {% if search_group_row_list %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-filter" aria-hidden="true"></i> 快速筛选
                    <div class="fold-button pull-right">
                        <span class="open_panel" style="display: none;cursor: pointer;">展开</span>
                        <span class="close_panel" style="cursor: pointer;">收起</span>
                    </div>
                </div>
                <div class="panel-body fold-box">
                    <div class="search-group card card-body">
                        {% for row in search_group_row_list %}
                            <div class="row">
                                {% for obj in row %}
                                    {{ obj|safe }}
                                {% endfor %}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endif %}
        <div style="margin-bottom: 10px;" class="right">
            <form class="form-inline" method="get">
                <div class="form-group">
                    <input name="keyword" type="text" class="form-control" placeholder="请输入关键字" value="{{ keyword }}">
                </div>
                <button type="submit" class="btn btn-primary">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </form>

        </div>
        <table class="table table-bordered table-hover table-striped">
            <thead class="root">
            <tr>
                <th>序号</th>
                {% for item in header_list %}
                    <th style="text-align: center;">{{ item }}</th>
                {% endfor %}
            </tr>
            </thead>
            <tbody>
            {% for row in body_list %}
                <tr>
                    <td class="" style="vertical-align: middle;text-align: center;">{{ forloop.counter }}</td>
                    {% for ele in row %}
                        <td style="vertical-align: middle;text-align: center;">{{ ele }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
            </tbody>
        </table>

        <ul class="pagination">
            {{ pager.html }}
        </ul>
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-pie-chart" aria-hidden="true"></i> Nday攻击分布
                    </div>
                    <div class="panel-body">
                        <div id="ndayAttack" cid="{{ id }}" style="height: 500px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block js %}
    <script src="{% static 'plugins/highcharts/highcharts.js' %}"></script>
    {#    <script src="{% static 'js/pie_chart.js' %}"></script>#}
    <script>
        var CHART_NDAY_TITLE = "Nday攻击分布";
        var NDAY_API_URL = "{% url 'botgate_ndaytype_chart' %}";
        var CID = $("#ndayAttack").attr("cid");
        $(function () {
            initPieChart(NDAY_API_URL, CHART_NDAY_TITLE, CID, 'ndayAttack');
        });

        function initPieChart(api_url, title, cid, chart_id) {
            var config = {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                credits: {
                    enabled: false // 关闭版权信息
                },
                title: {
                    text: null
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            },
                            connectorColor: 'silver'
                        },
                        showInLegend: false
                    }
                },
                series: [{
                    name: title,
                    colorByPoint: true,
                    data: {
                        name: 'media-kunming.railway.cn', y: 5,
                    }
                },]
            };
            $.ajax({
                url: api_url,
                type: "GET",
                data: {id: cid},
                dataType: "JSON",
                success: function (res) {
                    config.series[0].data = res.data
                    Highcharts.setOptions({
                        global: {
                            useUTC: false
                        }
                    });
                    var chart = Highcharts.chart(chart_id, config);
                }
            })
        }
    </script>
{% endblock %}